<template>
  <div class="dashboard-editor-container">
    <div class="block" />
    <el-card header="配置信息" shadow="never">
      <el-form :v-model="cfgDataForm" label-width="100px">
        <el-form-item label="供能方式" required>
          <el-radio-group v-model="supplyType">
            <el-radio :label="1">
              供冷
            </el-radio>
            <el-radio :label="2">
              供热
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row>
          <el-col :span="4">
            <el-form-item label="峰电价" required label-width="101px">
              <el-input v-model="cfgDataForm.ePriceH" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="谷电价" required>
              <el-input v-model="cfgDataForm.ePriceL" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="平电价" required>
              <el-input v-model="cfgDataForm.ePriceM" size="small" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="气价" required>
              <el-input v-model="cfgDataForm.qPrice" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="水价" required>
              <el-input v-model="cfgDataForm.waterPrice" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="市政热价" required>
              <el-input v-model="cfgDataForm.waterPrice" size="small" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-row>
            <el-col :span="12">
              <el-button type="primary" @click="createData()">保存</el-button>
              <el-button type="primary" @click="commitData()">提交</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>历史配置</span>
      </div>
      <div class="item">
        <el-table :data="cfgList" border style="width: 100%">
          <el-table-column prop="date" label="更新日期" width="180">
            <!-- <template slot-scope="{row}">
              <span>{{ row.date | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
            </template> -->
          </el-table-column>
          <el-table-column prop="ePriceH" label="峰电价（元）" width="180" />
          <el-table-column prop="ePriceL" label="谷电价（元）" width="180" />
          <el-table-column prop="ePriceM" label="平电价（元）" width="180" />
          <el-table-column prop="qPrice" label="气价（元）" width="180" />
          <el-table-column prop="waterPrice" label="水价（元）" width="180" />
          <el-table-column prop="mhPrice" label="市政热价（元）" width="180" /> // Municipal heat
          <el-table-column prop="user" label="操作用户" width="180" />
        </el-table>
      </div>
    </el-card>

    <!-- 表格 -->
  </div>

</template>

<script>
import { getCfg } from '@/api/cfg'
import { parseTime } from '@/utils'

export default {
  data() {
    return {
      supplyType: 1,
      cfgDataForm: {
        ePriceH: '',
        ePriceL: '',
        ePriceM: '',
        qPrice: '',
        waterPrice: '',
        mhPrice: ''
      },
      temp: {
        date: '',
        ePriceH: '',
        ePriceL: '',
        ePriceM: '',
        qPrice: '',
        waterPrice: '',
        mhPrice: '',
        user: ''
      },
      cfgList: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 初始化表单数据
    initForm(form) {
      this.cfgDataForm = {
        ePriceH: form.ePriceH,
        ePriceL: form.ePriceL,
        ePriceM: form.ePriceM,
        qPrice: form.qPrice,
        waterPrice: form.waterPrice,
        mhPrice: form.mhPrice
      }
    },

    fetchData() {
      this.listLoading = true
      getCfg().then(response => {
        this.cfgList = response.data.items
        this.listLoading = false
        if (response.data.total > 0) {
          // this.cfgDataForm = response.data.items[0]
          this.initForm(response.data.items[0])
        }
      })
    },

    resetTemp() {
      this.temp = {
        date: parseTime(new Date(), '{y}-{m}-{d}'),
        ePriceH: this.cfgDataForm.ePriceH,
        ePriceL: this.cfgDataForm.ePriceL,
        ePriceM: this.cfgDataForm.ePriceM,
        qPrice: this.cfgDataForm.qPrice,
        waterPrice: this.cfgDataForm.waterPrice,
        mhPrice: this.cfgDataForm.mhPrice,
        user: 'admin'
      }
    },
    // 保存数据
    createData() {
      this.resetTemp()
      this.cfgList.unshift(this.temp)
      this.$notify({
        title: 'Success',
        message: '保存成功',
        type: 'success',
        duration: 2000
      })
    },

    // 提交数据
    commitData() {
      this.$notify({
        title: 'Success',
        message: '提交成功',
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// .dashboard {
//   &-container {
//     margin: 30px;
//   }
//   &-text {
//     font-size: 30px;
//     line-height: 46px;
//   }
// }
</style>
